<template>
  <div class="file-upload">
    <div
        class="upload-area"
        :class="{ 'drag-over': isDragOver }"
        @drop="handleDrop"
        @dragover.prevent="isDragOver = true"
        @dragleave="isDragOver = false"
        @click="triggerFileInput"
    >
      <div v-if="!previewUrl" class="upload-placeholder">
        <div class="upload-icon">📁</div>
        <p>点击或拖拽图片到这里</p>
        <p class="upload-hint">支持 JPG、PNG、JPEG 格式</p>
      </div>
      <div v-else class="file-preview">
        <img :src="previewUrl" alt="预览图片" class="preview-image">
        <div class="file-info">
          <p class="file-name">{{ fileName }}</p>
          <p class="file-size">{{ fileSize }}</p>
        </div>
      </div>
    </div>

    <input
        ref="fileInputRef"
        type="file"
        accept="image/*"
        style="display: none"
        @change="handleFileSelect"
    >
  </div>
</template>

<script>
import { createImagePreview } from '@/utils/helpers'

export default {
  data() {
    return {
      isDragOver: false,
      previewUrl: '',
      fileName: '',
      fileSize: ''
    }
  },
  methods: {
    triggerFileInput() {
      this.$refs.fileInputRef.click()
    },

    handleFileSelect(event) {
      const file = event.target.files[0]
      if (file) this.processFile(file)
    },

    handleDrop(event) {
      event.preventDefault()
      this.isDragOver = false
      const file = event.dataTransfer.files[0]
      if (file) this.processFile(file)
    },

    async processFile(file) {
      this.fileName = file.name
      this.fileSize = this.formatFileSize(file.size)

      try {
        this.previewUrl = await createImagePreview(file)
        this.$emit('file-selected', file)
      } catch (err) {
        console.error('文件预览失败', err)
      }
    },

    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }
  }
}
</script>

<style scoped>
.file-upload {
  margin-bottom: 40px;
}

.upload-area {
  border: 3px dashed #ddd;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
  max-width: 800px;
  margin: 0 auto;
}

.upload-area:hover,
.upload-area.drag-over {
  border-color: #3498db;
  background: #f0f7ff;
}

.upload-placeholder .upload-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  color: #3498db;
}

.upload-placeholder p {
  margin: 10px 0;
  font-size: 1.1rem;
  color: #666;
}

.upload-hint {
  font-size: 0.9rem;
  color: #999;
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.preview-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #eee;
}

.file-info {
  text-align: left;
}

.file-name {
  font-weight: 600;
  margin: 0 0 5px 0;
  color: #333;
}

.file-size {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
</style>